<template>
    <div class="bread-crumb">
        <slot></slot>
    </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, provide, ref } from 'vue';
import { breadcrumbKey } from '../constants.js';
const instance = getCurrentInstance();

defineOptions({
    name: 'BreadCrumb'
});

const props = defineProps({
    /**
   * @description separator character
   */
    separator: {
        type: String,
        default: '/',
    },
    /**
     * @description icon component of icon separator
     */
    separatorIcon: {
        type: String | Object | Function
    }
});

const breadCrumbItemUidList = ref([]);
onMounted(() => {
    // getBreadCrumbItemsUid();
})

// const getBreadCrumbItemsUid = () => {
//     const defaultSlots = instance.subTree.children.filter((child) => child.key === '_default')[0];
//     const slotChildren = defaultSlots.children[0].type === Symbol.for('v-fgt') ? defaultSlots.children[0].children : defaultSlots.children;
//     breadCrumbItemUidList.value = slotChildren.filter((item) => item.type.name === 'BreadCrumbItem').map((item) => item.component.uid);
// }
provide(breadcrumbKey, props);
// provide('breadCrumbItemUidList', breadCrumbItemUidList);

</script>

<style lang="scss">
.bread-crumb {
    .bread-crumb-item {
        &:last-child {
            .separator {
                display: none;
            }
        }
    }
}
</style>
